﻿{% extends "app/layout.html" %}

{% block content %}
<div class="page-header">
    <h1>视频教程 <small>业精于勤，荒于嬉；行成于思，毁于随。</small></h1>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <h2 id="vtitle"></h2>
            <iframe id="play_iframe" class="col-md-12" src="#" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
        </div>
        <div class="col-md-4">
            <div id="bili_div" class="panel-group" id="accordion">

            </div>
        </div>
    </div>
</div>


{% endblock %}

{% block scripts %}
<script src="{% static 'app/scripts/bili.js' %}"></script>
<script>
    function v(aid, cid, page, part) {
        let url = "//player.bilibili.com/player.html?aid=" + aid + "&cid=" + cid + "&page=" + page;
        document.getElementById("play_iframe").src = url;
        document.getElementById("vtitle").innerHTML = part;
        console.log(url);
    }

    $(document).ready(function () {
        let html = "";
        let ts = ["primary", "success", "info", "warning", "danger"];
        for (let i = 0; i < bili.length; i++) {
            let d = bili[i];
            let tid = 'id_' + i;
            let win = i == 0 ? " in" : "";
            html += '<div class="panel panel-' + ts[i % 5] + '"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#' + tid + '">' + d.title + '</a></h4></div><div id="' + tid + '" class="panel-collapse collapse' + win + '"><div class="panel-body"><ul>';
            for (let j = 0; j < d.s.length; j++) {
                let s = d.s[j];
                let page = j + 1;
                if (d.title == '算法竞赛')
                    page = 1;
                html += '<li><a href="#" onclick="v(' + s.aid + ',' + s.cid + ',' + page + ', \'' + s.part + '\')">' + s.part + '</a></li>';
                if (i == 0 && j == 0) v(s.aid, s.cid, page, s.part);
            }
            html += '</ul></div></div></div>';
        }
        $("#play_iframe").height($("#play_iframe").width() * 480 / 640);
        $("#bili_div").html(html);
    });
</script>
{% endblock %}